<!DOCTYPE html>
<html>
  <head>
    <title>Popcorn Soundcloud Player Example</title>
    <style>
      #media_1{
        width: 80%;
        height: 160px;
      }
    </style>
    <script src="../../popcorn.js"></script>
    <script src="../../modules/player/popcorn.player.js"></script>
    <script src="../../wrappers/common/popcorn._MediaElementProto.js"></script>
    <script src="../../wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js"></script>
    <script type="text/javascript" src="popcorn.soundcloud.js"></script>
    <!-- Plugins for demo purposes -->
    <script src="../../plugins/footnote/popcorn.footnote.js"></script>

    <script type="text/javascript">
      document.addEventListener( "DOMContentLoaded", function() {
        var popcorn,
            muted = true;

        document.getElementById( "btnPlay" ).addEventListener( "click", function() {
          popcorn.play();
        }, false);

        document.getElementById( "btnPause" ).addEventListener( "click", function() {
          popcorn.pause();
        }, false);

        document.getElementById( "btnSeek" ).addEventListener( "click", function() {
          popcorn.currentTime( 30 );
        }, false);

        document.getElementById( "btnVolume" ).addEventListener( "click", function() {
          if ( popcorn.volume() >= 0.5 ) {
            popcorn.volume( popcorn.volume() / 2 );
            this.innerHTML = "Double Volume";
          } else {
            popcorn.volume( popcorn.volume() * 2 );
            this.innerHTML = "Halve Volume";
          }
        }, false);

        document.getElementById( "btnMute" ).addEventListener( "click", function() {
          popcorn.mute( muted );
          muted = !muted;
          this.innerHTML = !muted ? "Unmute" : "Mute";
        }, false);

        popcorn = Popcorn.soundcloud( "media_1", "http://soundcloud.com/rhymesayers/brother-ali-us" );

        popcorn.on( "load", function() {

          document.getElementById( "media_duration" ).innerHTML = popcorn.duration();
          document.getElementById( "media_volume" ).innerHTML = popcorn.volume();
          document.getElementById( "media_currentTime" ).innerHTML = popcorn.currentTime();
          document.getElementById( "media_readyState" ).innerHTML = popcorn.media.readyState;

          popcorn.on( "timeupdate", function() {
            document.getElementById( "media_currentTime" ).innerHTML = popcorn.currentTime();
          });

          popcorn.media.addEventListener( "readystatechange", function() {
            document.getElementById( "media_readyState" ).innerHTML = popcorn.video.readyState;
          });

          popcorn.on( "volumechange", function() {
            document.getElementById( "media_volume" ).innerHTML = popcorn.volume();
          });

          popcorn.trigger( "play" );
        });

        // Empty for the purposes of allowing popcorn.trigger("play");
        popcorn.on( "play", function() {

        });

        popcorn.footnote({
          start: 5,
          end: 40,
          text: "The song is 'Flickermood', by Forss",
          target: "footnotediv"
        });

      }, false);
    </script>
  </head>
  <body>
    <div id="media_1" ></div><br />
    <div>
      <button class="simple" id="btnPlay">Play</button>
      <button class="simple" id="btnPause">Pause</button>
      <button class="seek" id="btnSeek">Seek to 30</button>
      <button class="volume" id="btnVolume">Toggle Volume</button>
      <button class="volume" id="btnMute">Mute</button><br />
      <div style="float: left;">
        Current Time (s): <span id="media_currentTime"></span>
        <br />Duration (s): <span id="media_duration"></span>
        <br />Volume (0-1): <span id="media_volume"></span>
        <br />Ready State: <span id="media_readyState">0</span>
      </div>
    </div>
    <div style="float:right; width: 100%;">
      <br />
      <div id="footnotediv" width="50%" height="50%">
        <strong>Footnote Area</strong><br />
      </div>
    </div>
  </body>
</html>
